1. this.state
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| var LikeButton = React.createClass({
getInitialState:function(){
return {
like:false
};
},
handleClick: function(event) {
alert(556);
this.setState({
like:!this.state.like
});
alert(this.state.like);
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
{this.state.like.toString()}
</p>
)
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
|
getInitialState 方法返回的是this.state，this.state 改变，DOM绑定的值也会变。
this.setState可以改变state的值。
2. this.refs.ref
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| var HelloMessage = React.createClass({
handleClick:function(){
this.refs.myTextInput.focus();
this.refs.myTextInput.value = "1234567";
},
render:function(){
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<HelloMessage name="join" />,
document.getElementById("example")
)
|
给input加一个ref属性，方法中通过访问this.refs.ref名称来获取dom节点。